<template>
	<view class="wha main bb">
		<view class="title">元音</view>
		<view class="vowel d_f_sbrwe">
			<view class="item" :class="item.separate ? 'border_c' : ''" @click="playSound(item.sound)" v-for="item in vowel">
			    <view class="separate man_font">{{item.separate}}</view>
			    <view class="name">{{item.name}}</view>
			    <view class="transfer"> {{item.separate ? '转写：' : ''}} <view class="col_red">{{item.transfer}}</view></view>
			</view>
		</view>
		<view class="title">辅音</view>
		<view class="consonant d_f_sbrwe">
			<view class="item" :class="item.separate ? 'border_c' : ''" @click="playSound(item.sound)" v-for="item in consonant">
			    <view class="separate man_font">{{item.separate}}</view>
			    <view class="name">{{item.name}}</view>
			    <view class="transfer"> {{item.separate ? '转写：' : ''}} <view class="col_red">{{item.transfer}}</view></view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: '音标',
		props: [],
		data() {
			return {
				title: '音标',
				// 长短音、高底音
				vowel: [
					{name: ':',transfer: '长音',sound: ''},
			
					{name: 'a',transfer: 'a',sound: 'a'},
					{name: 'æ',transfer: 'a',sound: 'a2'},        // 【部分a】tacimbi [tætɕime] 学 小口ai
					{name: 'ɯ',transfer: 'e',sound: 'e'},
					{name: 'ɤ',transfer: 'e',sound: 'e2'},
					{name: 'e',transfer: 'e',sound: 'e3'},        // 【部分e】gisurembi [gizɿrɯme] ie
					{name: 'i',transfer: 'i',sound: 'i'},
					{name: 'y',transfer: 'ioi',sound: 'y'},       //  yv  yuyumbi [jyjyme] 饥饿
					{name: 'ɔ',transfer: 'o',sound: 'o'},         // 【o】bodombi [bɔdɔme] 思考 同汉语拼音o
					{name: 'o',transfer: 'o、oo',sound: 'oo'},
					{name: 'u',transfer: 'u',sound: 'u'},         // 【u】etuku [u:tuku] 衣服 
					{name: 'ʊ',transfer: 'ū、v',sound: 'v'}       // 【v】hvlambi [χʊlame] 读 o和u之间的音 通常是和kgh一起拼读
				],
				consonant: [
					{name: 'n',transfer: 'n',sound: 'n'},
					{name: 'q',transfer: 'k+a、o、ū',sound: 'k1'},
					{name: 'ɢ',transfer: 'ɡ+a、o、ū',sound: 'g1'},
					{name: 'χ',transfer: 'h+a、o、ū',sound: 'h1'},
					{name: 'b',transfer: 'b',sound: 'b'},
					{name: 'p',transfer: 'p',sound: 'p'},
					{name: 's',transfer: 's',sound: 's'},
					{name: 'ɕ',transfer: 'si',sound: 'si'},      // "西"
					{name: 'ʂ',transfer: 'š、x、si',sound: 'x'}, // "sh" 大部分si字中、字尾 šadambi [ʂadɯme] 累
					{name: 't',transfer: 't',sound: 't'},
					{name: 'ts',transfer: "ts'",sound: 'ts'},    // "c" saman[tsa:man] 萨满
					{name: 'd',transfer: 'd',sound: 'd'},
					{name: 'z',transfer: 'dz、s',sound: 'dz'},   // "z" 部分s字中、字尾 dasambi [dazame] 收拾
					{name: 'l',transfer: 'l',sound: 'l'},
					{name: 'm',transfer: 'm',sound: 'm'},
					{name: 'me',transfer: 'mbi',sound: 'me'},
					{name: 'tʂ',transfer: 'c、q',sound: 'c'},
					{name: 'tɕ',transfer: 'ci、qi',sound: 'ci'},    // tucimbi [tɕitɕime] 出去
					{name: 'dʐ',transfer: 'j',sound: 'j'},          // "zh" jafambi [dʐa:vɯme] 抓
					{name: 'dʑ',transfer: 'ji',sound: 'ji'},        // jimbi [dʑi:me] 来 jige 来了
					{name: 'k',transfer: 'k+e、i、u',sound: 'k2'},
					{name: 'ɡ',transfer: 'ɡ+e、i、u',sound: 'g2'},
					{name: 'x',transfer: 'h+e、i、u',sound: 'h2'},
					{name: 'j',transfer: 'y',sound: 'y'},
			
					{name: 'r',transfer: 'r',sound: 'r'},
					{name: 'f',transfer: 'f',sound: 'f'},
					{name: 'v',transfer: 'w、f、b',sound: 'w'},     // 部分f和b字中、字尾
			
					{name: 'ŋ',transfer: 'ng',sound: 'ng'},
					{name: 'ʐ',transfer: 'x、si',sound: 'x2'},     // 部分x字中；部分si字中、字尾
			
			
					{name: 'ʁ',transfer: 'h',sound: 'h3'},
					{name: 'ɣ',transfer: 'ɡ',sound: 'g3'}         //(介于g和h之间)
			
					//  dʐʅ  tʂʅ  ʂʅ    ʐʅ   zɿ   tsɿ   sɿ
					// 'zhi''chi''shi''ri' 'zi' 'ci'  'si'
				]
			}
		},
		mounted() {
		},
		methods: {
			playSound(val) {
				console.log(val);
			},
		},
	}
</script>
<style>
.title{
	width: 100%;
	text-align: center;
	line-height: 60rpx;
	font-weight: bold;
	font-size: 30rpx;
}
.vowel,.consonant{
	width: 100%;
	margin: 0 auto;
}
.vowel .item,.consonant .item{
	width: 240rpx;
	text-align: center;
	border: 2rpx solid #ccc;
	box-sizing: border-box;
	border-radius: 8rpx;
	margin: 4rpx 2rpx;
	cursor: pointer;
}
.item:hover{
	box-shadow: inset 0 0 12rpx 0 #0077ff;
	border: 2rpx solid #2f90ff;
}
.name{
	line-height: 60rpx;
	font-size: 42rpx;
}
.transfer{
	font-size: 32rpx;
	line-height: 60rpx;
	color: #ff0200;
}
</style>